<template>
	<view class="tbody">
		<view class="head">
			我上传过的活动
		</view>
		<u--form :model="obj" ref="uForm">
			<u-form-item>
				<text class="name">活动名称</text>
				<u--input class="headline" disabled="true" placeholder="请输入内容" border="surround" v-model="obj.activeName"></u--input>
			</u-form-item>
			<u-form-item>
				<text class="name">活动时间</text>
				<u--input class="headline" disabled="true" placeholder="请输入内容" border="surround" v-model="obj.activeTime"></u--input>
			</u-form-item>
			<u-form-item>
				<text class="name">活动地址</text>
				<u--input class="headline" disabled="true" placeholder="请输入内容" border="surround" v-model="obj.activeAddr"></u--input>
			</u-form-item>
			<!-- 文本编辑盒子 -->
			<text class="name">活动详情</text>
				<!-- 文本域 -->
				<u-form-item>
					<u--textarea disabled="true" v-model="obj.activeIntr" autoHeight maxlength="500" count></u--textarea>
				</u-form-item>
				<!-- 上传图片 -->
				<u-form-item>
					<view class="article">
						<rich-text style="word-wrap:break-word; word-break:break-all;"
						class="ql-editor"
							:nodes="data_info.content"></rich-text>
						<view class="u-page" style="margin-top: 200rpx;">
							<view class="u-demo-block">
								<view class="u-demo-block__content">
									<view class="album">
										<view class="album__content">
											<u-album :urls="urls2"></u-album>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-form-item>
		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				URL: this.$store.state.user.URL,
				urls2: [], //图片回显
				// 上传要把数组转字符串
				obj: {
					activeName: '', //活动名称
					activeTime: '', //活动时间
					id: '', //本条活动的id
					activeAddr: '', //活动地址
					activeIntr: '', //内容
					activeImg: '' //图片，字符串格式
				},
			};
		},
		onLoad(options) {
			this.obj.id = options.id
			this.inquire(options.id)
		},
		methods: {
			async inquire(id) {
				const res = await uni.$http.get('/business/trial/' + id)
				res.data.data.activeImg.split(',').forEach(item => {
					this.urls2.push(this.URL + item)
				})
				this.obj = res.data.data
			},
		}

	}
</script>

<style lang="scss" scoped>
	.name {
		opacity: 0.5;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 0px;
		color: rgba(20, 58, 64, 1);
	}

	::v-deep .u-textarea__count {
		background-color: #f2fdff !important;
	}

	::v-deep .u-textarea {
		background: #F5FDFF !important;
		border-color: #daf6fb !important;
		min-height: 400rpx;
		background-color: #f2fdff !important;
		padding: 10rpx !important;
	}

	::v-deep .u-input {
		margin-top: 24rpx !important;
		// margin-bottom: 64rpx !important;
		padding-left: 24rpx !important;
		box-sizing: border-box !important;
		height: 78rpx !important;
		opacity: 1 !important;
		border-radius: 20rpx !important;
		background: #F5FDFF !important;
		// box-shadow: 0px 0px 0.5rpx 0px #16C1DB !important;
		font-size: 24rpx !important;
		font-weight: 400 !important;
		line-height: 0px !important;
		color: rgba(20, 58, 64, 1) !important;
		line-height: 74rpx !important;
		background-color: #f2fdff !important;
		border-color: #daf6fb !important;
	}

	.head {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(20, 58, 64, 1);
		margin-bottom: 48rpx;
		margin-top: 68rpx;
	}

	.box {

		::v-deep .u-textarea__field {
			background-color: #F2FDFF;
		}

		::v-deep .u-textarea {
			padding: 0;
		}

		::v-deep .u-upload__wrap__preview {
			margin-right: 13.5rpx;
			margin-top: 16rpx;
			width: 112rpx !important;
			height: 112rpx !important;
		}

		::v-deep .u-upload__button {
			margin: 0;
			margin-top: 16rpx;
			width: 112rpx !important;
			height: 112rpx !important;
			border-radius: 10px;
			border: 1px dashed #143A40;
			background-color: #f4fdff;
		}

		::v-deep .u-icon__icon {
			// display: none;
			font-size: 0;
		}

		::v-deep .uicon-camera-fill {
			background-image: url('/static/images/加@2x.png');
		}

		.image {
			font-size: 16rpx;
			font-weight: 400;
			color: #c1c4cb;
			text-align: right;
		}

	}
	::v-deep .u-page{
		margin-top: 0 !important;
	}
	.button {
		position: relative;
		width: 680rpx;
		height: 88rpx;
		border-radius: 60rpx;
		background: #16C1DB;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 88rpx;
		color: rgba(235, 252, 255, 1);
		text-align: center;

		.succeed {
			position: absolute;
			top: -912rpx;
			left: 88rpx;
			width: 512rpx;
			height: 288rpx;
			border-radius: 20rpx;
			background: #000000;
			opacity: 0.7;
			padding-top: 38rpx;

			image {
				width: 64px;
				height: 64px;
			}

			view {
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(235, 252, 255, 1);
				line-height: 1;
			}
		}
	}
</style>